<template>
	<view class="banner-edit">
		<!-- 基本信息 -->
		<view class="section">
			<view class="section-title">基本信息</view>
			<view class="form-item">
				<text class="label">标题</text>
				<input class="input" v-model="bannerInfo.title" placeholder="请输入轮播图标题" />
			</view>
			<view class="form-item">
				<text class="label">链接</text>
				<input class="input" v-model="bannerInfo.link" placeholder="请输入跳转链接" />
			</view>
			<view class="form-item">
				<text class="label">图片</text>
				<view class="upload-box" @click="chooseImage">
					<image v-if="bannerInfo.imageUrl" :src="bannerInfo.imageUrl" mode="aspectFill" class="preview-image"></image>
					<view v-else class="upload-placeholder">
						<text class="iconfont icon-camera"></text>
						<text>点击上传图片</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-btn" @click="handleSubmit">保存</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bannerId: '', // 轮播图ID
			bannerInfo: {
				title: '',
				link: '',
				imageUrl: ''
			}
		}
	},
	onLoad(options) {
		if (options.id) {
			this.bannerId = options.id
			this.loadBannerDetail()
		}
	},
	methods: {
		// 加载轮播图详情
		async loadBannerDetail() {
			try {
				uni.showLoading({
					title: '加载中...'
				})
				
				const res = await uniCloud.callFunction({
					name: 'getBannerDetail',
					data: { 
						bannerId: this.bannerId
					}
				})
				
				if (res.result.code === 0) {
					this.bannerInfo = res.result.data
				} else {
					uni.showToast({
						title: res.result.msg || '加载失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('加载轮播图详情失败', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		// 选择图片
		async chooseImage() {
			try {
				const res = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera']
				})
				
				if (res.tempFilePaths && res.tempFilePaths.length > 0) {
					// 上传图片到云存储
					const uploadRes = await uniCloud.uploadFile({
						filePath: res.tempFilePaths[0],
						cloudPath: `banner/${Date.now()}.jpg`
					})
					
					this.bannerInfo.imageUrl = uploadRes.fileID
				}
			} catch (error) {
				console.error('选择图片失败', error)
				uni.showToast({
					title: '选择图片失败',
					icon: 'none'
				})
			}
		},
		
		// 提交表单
		async handleSubmit() {
			// 表单验证
			if (!this.bannerInfo.title) {
				uni.showToast({
					title: '请输入标题',
					icon: 'none'
				})
				return
			}
			
			if (!this.bannerInfo.link) {
				uni.showToast({
					title: '请输入链接',
					icon: 'none'
				})
				return
			}
			
			if (!this.bannerInfo.imageUrl) {
				uni.showToast({
					title: '请上传图片',
					icon: 'none'
				})
				return
			}
			
			try {
				uni.showLoading({
					title: '保存中...'
				})
				
				const res = await uniCloud.callFunction({
					name: this.bannerId ? 'updateBanner' : 'addBanner',
					data: {
						bannerId: this.bannerId,
						bannerInfo: this.bannerInfo
					}
				})
				
				if (res.result.code === 0) {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({
						title: res.result.msg || '保存失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('保存轮播图失败', error)
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		}
	}
}
</script>

<style>
.banner-edit {
	min-height: 100vh;
	background-color: #f8f9fc;
	padding-bottom: 120rpx;
}

.section {
	background-color: #fff;
	margin-bottom: 20rpx;
	padding: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.form-item .label {
	display: block;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.input {
	width: 100%;
	height: 80rpx;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
}

.upload-box {
	width: 100%;
	height: 300rpx;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.preview-image {
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
}

.upload-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #999;
}

.upload-placeholder .iconfont {
	font-size: 60rpx;
	margin-bottom: 10rpx;
}

.submit-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	background-color: #4a6ee0;
	color: #fff;
	font-size: 32rpx;
}

/* 图标字体 */
@font-face {
	font-family: "iconfont";
	src: url('//at.alicdn.com/t/font_3456789_abcdef.woff2') format('woff2');
}

.iconfont {
	font-family: "iconfont" !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-camera:before {
	content: "\e7d7";
}
</style> 